import React, {useState} from 'react'
import { View, Text, StatusBar } from 'react-native'
import { Icon, SearchBar, TabBar } from '@ant-design/react-native'
import {Message, Contacts, Profile} from '..'
import {useSelector} from 'react-redux'

export default function index() {
  const [selectedTab, setSelectedTab] = useState('Message')
  const userFriendRequestCount = useSelector(state => state.user.userFriendRequestCount);
  

  return (
    <>
      <StatusBar translucent={true} backgroundColor="transparent" />
    <TabBar
      unselectedTintColor="#949494"
      tintColor="#33A3F4"
      barTintColor="#f5f5f5"
    >
      <TabBar.Item
        title="Message"
        icon={<Icon name="home" />}
        selected={selectedTab === 'Message'}
        onPress={() => setSelectedTab('Message')}
      >
        <Message />
      </TabBar.Item>
      <TabBar.Item
        icon={<Icon name="like" />}
        title="Friend"
        badge={userFriendRequestCount}
        selected={selectedTab === 'Friend'}
        onPress={() => setSelectedTab('Friend')}
      >
        <Contacts />
      </TabBar.Item>
      <TabBar.Item
        icon={<Icon name="ordered-list" />}
        title="圈子"
        selected={selectedTab === 'Quanzi'}
        onPress={() => setSelectedTab('Quanzi')}
      >
      </TabBar.Item>
      <TabBar.Item
        icon={<Icon name="user" />}
        title="My"
        selected={selectedTab === 'My'}
        onPress={() => setSelectedTab('My')}
      >
        <Profile />

      </TabBar.Item>
    </TabBar>
    </>
  );
}
